<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <script src="js/sethtmlfontSize.js"></script>
    <link rel="stylesheet" href="./css/search.css">
    <link rel="stylesheet" href="./css/searchhead.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
   <header class="searchs">
        <div class="search-left">
            <i></i>
        </div>
        <div class="search-center">
            <span class="center-span">商品</span>
            <div class="clears"></div>
            <img class="seacher-img" src="images/triangle_icon_search.png" alt="">
             <input id="search-input" type="text" autofocus>
 
          <div id="classify">
               <i></i>
               <ul class="c-ul">
                   <li><a href="./searchGoods.html"><img class="classify-img" src="images/goods_icon_search.png" alt=""><span class="classify-span">商品</span></a></li>
                   <li><a href="./searchShop.html"><img class="classify-img" src="images/goods_icon_search.png" alt=""><span class="classify-span">店铺</span></a></li>
                   <li><a href="./searchService.html"><img class="classify-img" src="images/fuwu_icon_search.png" alt=""><span class="classify-span">服务</span></a></li>
               </ul>
           </div>           
        </div>
        <div class="search-right">
           <span id="collect" class="collect">搜索</span>
           <span id="login">登录</span>
        </div>
        <div class="clears"></div>    
    </header>
     <!--点击搜索，显示历史记录-->
    <div id="centerHistory">
        <p class="p1">历史搜索</p>
        <ul class="history">
            <li><img class="center-img" src="./images/search_icon.png" alt=""><span class="li-span">外卖</span><i></i></li>
        </ul>
        <div class="history-clear">
            <p class="clear-p">清除历史记录</p>
        </div>
    </div> 
    
</body>
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="js/search.js"></script>
<script>
    $(function(){
        $(".search-center .center-span,.search-center .seacher-img").on("click",function(){
            $("#classify").toggle(); 
        });
    })
    //清空历史记录
    $(".clear-p").on("click",function(){
        $(".history").html("");
    });
    
    
</script>

</html>